<template>
  <div class="commentComponents">
    <div v-if="showComment">
      <div class="commentList" v-for="(item,key) in list" :key="key">
        <header>
          <div class="userDiv">
            <img class="avator" :src="item.userImageUrl" alt="">
            <div>
              <p>{{item.nickName}}</p>
              <van-rate v-model="item.gradeLevel" readonly allow-half color="#17b85b"
                style="transform: translateY(-10px)" />
            </div>

          </div>
          <div>
            <span class="date">{{item.createTime}}</span>
          </div>
        </header>
        <div class="content">
          <p>{{item.comment}}</p>
          <ul>
            <li>
              <img @click="previewImg(item.fileUrl,index)" v-for="(val,index) in item.fileUrl" :key="index"
                v-lazy="val.fileUrl" style="width:85px;height:85px;padding-right:6px" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-else style="text-align: center;color: #666;">
      此商品暂无评价
    </div>
    <!-- 图片预览 -->
    <div class="model" @touchmove.prevent v-if="showImgPreview">
      <van-image-preview v-model="showImgPreview" @touchmove.prevent :startPosition="imgIndex" :images="imgList"
        @change="onChange">
        <template v-slot:index>{{imgIndex+1}}/{{imgList.length}}</template>
      </van-image-preview>
    </div>
  </div>

</template>

<script>
  export default {
    props: ['commentList'],

    data() {
      return {
        showImgPreview: false,
        imgIndex: 0,
        imgList: [],
        showComment: false
      }
    },

    computed: {
      list() {
        return this.commentList.map(item => {
          item.gradeLevel = item.gradeLevel / 2
          return item
        })
      }
    },

    mounted() {
      if (this.commentList.length > 0) {
        this.showComment = true;
      } else {
        this.showComment = false;
      }
    },
    methods: {
      previewImg(imglist, index) {
        this.imgList = [];
        imglist.forEach(element => {
          this.imgList.push(element.fileUrl)
        });

        this.imgIndex = index;
        this.showImgPreview = true
      }, //图片的盒子
      onChange(index) {
        this.imgIndex = index
      },
    }
  }

</script>

<style lang="scss" scoped>
  .commentComponents {
    width: 294px;
    padding: 0 13px;
    // height: 60px;
    background: #fff;

    .commentList {
      border-bottom: 1px solid #f5f5f7;
      &:last-child {
        margin-bottom: 55px;
        border-bottom: none;
      }

      header {
        display: flex;
        justify-content: space-between;

        .date {
          font-size: 9px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }

        .userDiv {
          display: flex;

          .avator {
            margin: 13px 0;
            width: 34px;
            height: 34px;
          }

          p {
            padding: 0;
            margin: 13px 5px;
            display: inline-block;
            font-size: 11px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
        }
      }

      .content {
        p {
          width: 90%;
          padding: 0;
          margin: 0;
          font-size: 12px;
        }
      }
    }
  }

</style>
